2. Webとプログラミング

Webのプログラミング

サーバのプログラミング

ブラウザのプログラミング

両者の組み合わせ

Webを支える技術

http://www.amazon.co.jp/dp/4774142042 https://gyazo.com/8416cacf7ff1f32159c46e0aef1c670d.png

Webアクセスの基本

http://gyazo.com/4fe5e73511ea1909e61e437e06a50056.png

ブラウザの基本動作

HTTP

RFC2616

TCPの80番ポートを利用

ユーザがブラウザを操作

ブラウザがサーバにGETメソッドとURLを送る

URLで示されるデータをサーバがブラウザに送る

ブラウザの表示を更新する

TCP / IP

HTTPのベース

Internet Protocol

IP番号で宛先を指定してパケット送付

データは届かないかもしれない

TCP

Transmission Control Protocol

確実に情報を送る

Demo: サーバにtelnet

% telnet pitecan.com 80

code:telnet.txt

telnet hondana.org 80

Trying 153.120.0.184...

Connected to hondana.org.

Escape character is '^]'.

GET / HTTP/1.0

HTTP/1.1 200 OK

Date: Mon, 02 Oct 2017 05:12:22 GMT

Server: Apache/2.2.15 (CentOS)

Last-Modified: Sun, 29 Sep 2013 00:11:26 GMT

ETag: "4803db-11-4e77a8f83ad9e"

Accept-Ranges: bytes

Content-Length: 17

Connection: close

Content-Type: text/html; charset=UTF-8

本棚.org API

Connection closed by foreign host.

基本動作の場合

プログラミングは不要

Webサーバ(Apache, etc.)とブラウザ(Firefox, Chrome, etc.)が勝手にやってくれる

初期のWebはこれだけ

プログラムを動かすことが不可

CGIプログラムの利用

ユーザがブラウザを操作

ブラウザがサーバにCGIのURL+引数を送るというかデータを送る

GET, POST

HTTPサーバが送られたデータを解釈

HTTPサーバがCGIプログラムを起動

CGIプログラムが何かの計算を実行

計算結果をサーバがブラウザに送る

ブラウザの表示を更新する

CGIページ例 (get)

code:html

</form>

実際のやりとり

http://www.tohoho-web.com/ex/http.htm

サーバに送られる文字列

code:text

GET /calc.cgi?exp=3%2B4 HTTP/1.1

Host: pitecan.com

User-Agent: Mozilla/5.0 (Macintosh; U; Intel Mac OS X 10.5; ja-JP-mac; rv:1.9.0.8) Gecko/2009032608 Firefox/3.0.8

Accept: text/html,application/xhtml+xml,application/xml;q=0.9,*/*;q=0.8

Accept-Language: ja,en-us;q=0.7,en;q=0.3

Accept-Encoding: gzip,deflate

Accept-Charset: UTF-8,*

Keep-Alive: 300

Connection: keep-alive

Webの通信

http://gyazo.com/4fe5e73511ea1909e61e437e06a50056.png

CGIページ例 (post)

code:html

</form>

サーバに送られる文字列

code:text

POST /calc.cgi HTTP/1.1

Host: pitecan.com

User-Agent: Mozilla/5.0 (Macintosh; U; Intel Mac OS X 10.5; ja-JP-mac; rv:1.9.0.8) Gecko/2009032608 Firefox/3.0.8

Accept: text/html,application/xhtml+xml,application/xml;q=0.9,*/*;q=0.8

Accept-Language: ja,en-us;q=0.7,en;q=0.3

Accept-Encoding: gzip,deflate

Accept-Charset: UTF-8,*

Keep-Alive: 300

Connection: keep-alive

Content-Type: application/x-www-form-urlencoded

Content-Length: 9

exp=3%2B4

CGIプログラムへ渡される情報

環境変数のリスト

code:text

HTTP_HOST pitecan.com

HTTP_USER_AGENT Mozilla/5.0 (Macintosh; U; Intel Mac OS X 10.5; ja-JP-mac; rv:1.9.0.8) Gecko/2009032608 Firefox/3.0.8

HTTP_ACCEPT text/html,application/xhtml+xml,application/xml;q=0.9,*/*;q=0.8

HTTP_ACCEPT_LANGUAGE ja,en-us;q=0.7,en;q=0.3

HTTP_ACCEPT_ENCODING gzip,deflate

HTTP_ACCEPT_CHARSET UTF-8,*

HTTP_KEEP_ALIVE 300

HTTP_CONNECTION keep-alive

HTTP_CACHE_CONTROL max-age=0

PATH /sbin:/usr/sbin:/bin:/usr/bin

SERVER_SIGNATURE Apache/2.2.9 (Fedora) Server at pitecan.com Port 80

SERVER_SOFTWARE Apache/2.2.9 (Fedora)

SERVER_NAME pitecan.com

SERVER_ADDR 210.143.110.224

SERVER_PORT 80

REMOTE_ADDR 133.27.61.16

DOCUMENT_ROOT /www/www.pitecan.com

SERVER_ADMIN webmaster@pitecan.com

SCRIPT_FILENAME /env.cgi

REMOTE_PORT 60478

GATEWAY_INTERFACE CGI/1.1

SERVER_PROTOCOL HTTP/1.1

REQUEST_METHOD GET

QUERY_STRING exp=3+4

REQUEST_URI /env.cgi?exp=3+4

SCRIPT_NAME /env.cgi

Webの通信

http://gyazo.com/4fe5e73511ea1909e61e437e06a50056.png

CGIプログラム

サーバからプログラムが起動される

最近はあまり使われない

サーバと一体化するのが主流

Webサーバが返す形式の例

code:text

Http/1.1 200 OK

Date: Sun, 11 Jan 2004 16:06:23 GMT

Server: Apache/1.3.22 (Unix) (Red-Hat/Linux)

Last-Modified: Sun, 07 Dec 2003 12:34:18 GMT

ETag: "1dba6-131b-3fd31e4a"

Accept-Ranges: bytes

Content-Length: 3

Keep-Alive: timeout=15, max=100

Connection: Keep-Alive

Content-Type: text/html

579

Webの通信

http://gyazo.com/4fe5e73511ea1909e61e437e06a50056.png

Webサーバがやること

クライアント要求を正しく解析

必要があればCGIプログラムを呼び出し、その出力をクライアントに返す

またはJavaサーブレットなどを動かし、その出力をクライアントに返す

CGIプログラムがやるべきこと

(1) ユーザからの要求を解釈

(2) 何らかの計算

(3) 結果をHTMLなどの形式に変換してサーバに返す

CGIプログラムの作り方

自力で全部作る

ライブラリを活用しまくる

フレームワークを使う

自力で全部作る場合

code:ruby

#! /usr/bin/ruby

# -*- coding: euc-jp -*-

# リクエスト解析

method = ENV'REQUEST_METHOD'

if method == 'GET' then

data = ENV'QUERY_STRING'

elsif method == 'POST' then

data = STDIN.read(ENV'CONTENT_LENGTH'.to_i)

end

# エスケープ文字解決 / 計算実行

data =~ /exp=(.*)$/

exp = $1.sub(/%(..)/){ $1.pack('H*')

result = eval(exp)

# 結果を出力

print "Content-type: text/plain\r\n\r\n"

print "#{result}\r\n"

ライブラリを使う場合

code:ruby

#! /usr/bin/ruby

require 'cgi'

cgi = CGI.new('html3')

exp = cgi.params'exp'0

result = eval(exp)

cgi.out { result.to_s }

Webアプリケーションフレームワーク(WAF)

面倒なプログラミングを簡単化する

Webサーバに融合

フレームワークの例

WebObjects (Objective-C, Java)

Django (Python)

Struts (Java)

Ruby on Rails (Ruby)

Sinatra (Ruby)

Express (Node.js)

Webサーバプログラミングの面倒なところ

パラメタの解釈

HTMLの出力

状態遷移の保持

(デザインの面倒さは解決しない)

WebObjectsの歴史

1996 世界初のアプリケーションサーバとしてNeXTが開発

アップルがNeXT買収 WebObjectsは5万ドル

2000 699ドル(!)に値下げ

2001 OSX Server販売により実質無料に

2006 開発ツール終焉

2007 Rails環境がMacに標準装備

フレームワークがやってくれること

データベースアクセス

O/Rマッピング

HTMLテンプレート

URLマッピング

その他

認証、セキュリティ

セッションの保持

Ajax対応

サーバとのバックグラウンド通信

キャッシュ処理

Demo: Railsを使ったサイト構築

code:shell

% rails new Keio

% cd Keio

% rails generate scaffold person name:string age:integer

% rake db:migrate

% rails server

Railsサイトの例

本棚.org

QuickML

Gyazo

Sinatraを使ったサイト構築

http://www.sinatrarb.com/ https://gyazo.com/fa83422e8546766506cbda9fdb8f7148.png

Sinatra+Passengerによる運用

ApacheなどでSinatraベースのサービスを楽に運用できる

Rack

RubyのWebアプリケーションとWebサーバを連絡

Apache + mode_passenger

Sinatraサイトの例

Gyazz

Gyamm

EpisoPass

Express

Node.jsを使ったSinatra風Webフレームワーク

node.jsで最も普及しているWAF

例: Scrapbox

フレームワークの問題点?

簡単にできることも多いのだが...

重厚長大

様々なシステムが必要

Ruby, Node, SQL, ...

本質的でない沢山のことを覚える必要がある

特殊な記法

特殊なコンベンション

遅い場合もある

いろんな処理をするので直書きよりは遅い

でも泣きながら使うことになる

e.g. LaTeX

楽々サイト作り

Apache + mod_passenger + Sinatra

軽くて簡単

Apache + mod_passenger + Rails

実例が多い

重厚長大

新しいサーバ

Nginx

Node.js + express

ブラウザのプログラミング

何故ブラウザでのプログラミングが必要か

見栄えを奇麗に

反応をよくする = なめらかなインタフェースを実現する

高速動作

ページ遷移をなくす

普通のアプリケーションのようなものをブラウザ上で動かす

反応をよくするにはローカルにプログラムを動かすしか方法はない

クライアントのプログラミングシステム

ブラウザ表示データを操作するもの

JavaScript

ブラウザと無関係にプログラムを動かすもの

プラグイン

Flash

Java

サーバと通信する機能がある

JavaScript

1995 Netscapek2.0で導入

1996 IEで採用

1997 EcmaScriptとして標準化

2005 Ajax

現在様々なライブラリが登場

ES6

JavaScriptのフレームワーク

https://gyazo.com/cc410e769fb38de382728bee0d8bc629.png

JavaScriptのフレームワーク/ライブラリ

フレームワークの比較

jQuery

Backbone.js

Ember.js

Knockout.js

AngularJS

React.js

Ractive.js

vue.js

Aurelia.js

jQuery

http://jquery.com/ http://gyazo.com/a9dc19a7b09251c41f988a89c6b069eb.png

広く利用されていたJavaScriptライブラリ

様々な機能を短く表現できる

code:javascript.js

a = document.getEementById('abc');

code:jquery.js

a = $('#ab');

jQuery機能の取り込み

標準JavascriptでもjQueryのような機能が使えるようになった

code:javascript.js

a = document.querySelector('#ab')

fetch()...

React.js

「VirtualDOM」を操作

DOM要素に対応するJavaScriptの中にHTMLを書く

code:javascript

var MyApp = React.createClass({

getInitialState: function(){

return {

firstName: this.props.firstName,

lastName: this.props.lastName,

}

handleChange: function(){

var firstName = this.refs.firstName.getDOMNode().value;

var lastName = this.refs.lastName.getDOMNode().value;

this.setState({

firstName: firstName,

lastName: lastName,

});

render: function() {

var fullName = this.state.firstName + this.state.lastName;

return (

<div>

First name: <input ref="firstName" onChange={this.handleChange} value = {this.state.firstName}/><br/>

Last name: <input ref="lastName" onChange={this.handleChange} value={this.state.lastName}/><br/>

Full name: {fullName}

</div>);

}

});

React.render(<MyApp firstName="Taro" lastName="Yamada" />, document.body);

CoffeeScript

JavaScriptに皮をかぶせたもの

「AltJS」と呼ばれる

Rubyに似た各種の簡易表現が可能

関数を扱いやすい

コード量がJavaScriptの半分ぐらいになる